<template>
  <el-container>
    <el-header></el-header>
    <el-container>
      <el-aside width="500px">
        <el-image style="width:350px; height: 350px"
                  :src="book.BookImgRoot"
        ></el-image>
      </el-aside>
      <el-main>
        <div class="bookNameStyle">
          书名: {{book.BookName}}
        </div >
        <div class="authorStyle">
          作者:{{book.Author}}
        </div>
        <div class="priceStyle">
          价格:{{book.Price}}
        </div>
        <div class="detailStyle">
          介绍:{{book.Detail}}
        </div>
        <el-button type="primary" plain class="addStyle" @click="link">添加购物车</el-button>

      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'BookDetail',
  data () {
    return {
      BookName: sessionStorage.getItem('BookName'),
      shoppingCartData: [],
      book:
        {
          ID: '',
          BookImgRoot: '',
          BookName: '',
          Author: '',
          Price: '',
          Detail: ''
        }
    }
  },
  methods: {
    getShoppingCart () {
      console.log('start getting')
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/getShoppingCart')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.dealShoppingCart(xmlhttp.response)
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
    },
    dealShoppingCart (res) {
      let items = JSON.parse(res)
      for (var i = 0; i < items.length; i++) {
        let tem = {bookName: items[i].bookName, price: items[i].price, buyNum: items[i].buyNum}
        this.shoppingCartData.push(tem)
      }
    },
    link () {
      this.ID = localStorage.getItem('userID')
      if (!this.ID) {
        alert('请先登录')
        return
      }
      for (var i = 0; i < this.shoppingCartData.length; i++) {
        if (this.shoppingCartData[i].bookName === this.book.BookName) {
          alert('此书已在购物车中')
          return
        }
      }
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/addToShoppingCart')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let tem = {bookName: this.book.BookName, price: this.book.Price, buyNum: 1}
      let data = {id: this.ID, book: tem}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            alert('已添加至购物车')
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
      // this.shoppingCartData = []
      // console.log('start', this.shoppingCartData)
      // this.getShoppingCart()
      // console.log('gotten', this.shoppingCartData)
      // for (var i = 0; i < this.shoppingCartData.length; i++) {
      //   if (this.shoppingCartData[i].bookName === this.book.BookName) {
      //     alert('此书已在购物车中')
      //     return
      //   }
      // }
      // let tem = {bookName: this.book.BookName, price: this.book.Price, buyNum: 1}
      // this.shoppingCartData.push(tem)
      // console.log('新加入')
      // console.log(this.shoppingCartData)
      // this.saveItems()
      // this.save()
      // alert('已添加至购物车')
      // this.$router.push('/ShoppingCart')
      // this.$router.push({ path: '/Contests/' + this.BookName })
    },
    getBookDetail () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/booksInfo/findByName')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let book = {bookName: this.BookName}
      xmlhttp.onreadystatechange = function (res) {
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.dealBookDetail(xmlhttp.response)
          }
        }
      }
      xmlhttp.send(JSON.stringify(book))
    },
    dealBookDetail (res) {
      let books = JSON.parse(res)
      this.book.BookName = books[0].bookName
      this.book.Author = books[0].writer
      this.book.BookImgRoot = ('http://127.0.0.1:3100/images/' + books[0].image)
      this.book.Price = books[0].price
      this.book.Detail = books[0].details
    }
  },
  created () {
    this.ID = localStorage.getItem('userID')
    this.getBookDetail()
    if (this.ID) {
      this.getShoppingCart()
    }
  }
}
</script>

<style scoped>
el-img{
  margin:0 auto;
  padding: 10px; }
.item{
  padding: 20px;
  font-size: 20px;
  margin: 20px;
  float: left;
}
  .bookNameStyle{
    margin-top: 1%;
    margin-right: 50%;
    font-size: 20px;
    padding: 10px;

    width: 50%;
    text-align: left
  }
.authorStyle{
  margin-top: 1%;
  margin-right: 50%;
  font-size: 20px;
  padding: 10px;

  width: 30%;
  text-align: left
}
.priceStyle{
  margin-top: 1%;
  margin-right: 50%;
  font-size: 20px;
  padding: 10px;

  width: 30%;
  text-align: left
}
.detailStyle{
  margin-top: 1%;
  margin-right: 50%;
  font-size: 20px;
  padding: 10px;

  width: 90%;
  text-align: left
}
  .addStyle{
    margin-top: 2%;
    font-size: 20px;
  }
</style>
